<template>
  <dt-modal-edit class="jumpEdit" ref='edit' :title='title' :label-width='120' okText="保存" :okDisabled="flag != 'detail' ? false : true" :width='880' @ok='onOk'>
    <div slot="bottom" class="detail">
      <div class="title">
        <p>职级跳点</p>
        <Button type="primary" size="small" @click="onAdd" v-if="flag != 'detail'">新增跳点</Button>
      </div>
      <dt-grid ref="table" :columns="columns" :list="info.boRankJumpPointDetailInfos" height-resize />
    </div>
  </dt-modal-edit>
</template>

<script>
  import editMgr from '../opt/jump-edit.js'
  import levelMgr from '@/biz/bonus/level.js'
  
  export default {
    data() {
      return {
        info: {},
        title: '职级跳点新增',
        columns: [],
        flag: 'create',
        index: -1
      }
    },
    mounted() {
    },
    methods: {
      create() {
        this.flag = 'create'
        this.title = '职级跳点新增'
        this.info = {
          jumpName: '',
          jumpType: 'CONTRACT_AMOUNT',
          targetType: 'MONTH_PERSON',
          targetValue: '1',
          baseMentionSomething: '1',
          postIds: [],
          productIds: [],
          effectiveWay: '2',
          effectiveStartDate: '',
          effectiveEndDate: '',
          boRankJumpPointDetailInfos: []
        }
        this.index = -1
        this.show()
      },
      edit(info, index) {
        this.flag = 'edit'
        this.title = '职级跳点修改'
        this.info = { ...info }
        this.index = index
        this.show()
      },
      detail(info) {
        this.flag = 'detail'
        this.title = '职级跳点明细'
        this.info = { ...info }
        this.index = -1
        this.show()
      },
      show() {
        this.$refs.edit.show(editMgr.options(this, this.flag), this.info)
        this.columns = editMgr.column(this, this.flag)
        this.$refs.table.init(this)
      },
      hide() {
        this.$refs.edit.hide()
      },
      update() {
        this.$refs.edit.update(editMgr.options(this, true))
      },
      updateColumn() {
        this.columns = editMgr.column(this)
        this.info.boRankJumpPointDetailInfos = []
      },
      onAdd() {
        this.info.boRankJumpPointDetailInfos.push({
          startValue: 0,
          startInterval: '1',
          endValue: 0,
          endInterval: '2',
          mentionSomethingType: '1',
          mentionSomethingPercentage: 100,
        })
      },
      onDelete(data) {
        let index = this.info.boRankJumpPointDetailInfos.indexOf(data)
        this.info.boRankJumpPointDetailInfos.splice(index, 1)
      },
      onOk(info) {
        if (levelMgr.onValidateDetail(info)) {
          this.$emit('detail', info, this.index)
          this.hide()
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .detail {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      p {
        line-height: 20px;
        border-left: 3px solid #2b85e4;
        padding-left: 8px;
      }
    }
  }
  
  ::v-deep .ivu-modal-body {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
  }
</style>
